<?php include 'head.php';?>
<script type="text/javascript">
	$(function() {
	$( "ul.droptrue" ).sortable({
			connectWith: "ul"
		});
	$( "#dialog:ui-dialog" ).dialog( "destroy" );
	var g;
	
	var name = $( "#name" ),
		password = $( "#password" ),
		fname = $( "#fname" ),
		lname = $( "#lname" ),
		email = $( "#email" ),
		uname = $( "#uname" ),
		spass = $( "#spass" ),
		month = $( "#month" ),
		day = $( "#day" ),
		year = $( "#year" ),
		allFields = $( [] ).add( name ).add( password ).add( fname ).add( lname ).add( email ).add( uname ).add( spass ).add( month ).add( day ).add( year ),
		tips = $( ".validateTips" );
		
	function updateTips( t ) {
		tips
			.text( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Incomplete Fields!" );
			return false;
		} else {
			return true;
		}
	}

	function checkVal( val ) {
		if ( val == 0 ) {
			$(function() {
				$( "#error" ).dialog({ 
					autoOpen: true ,
					modal: true,
					buttons: {
						" Ok ": function() {
							$( this ).dialog( "close" );
						}
					}
				})
			});
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}
	
	$( "#login-form" ).dialog({
		autoOpen: false,
		height: 250,
		width: 350,
		modal: true,
		show: "explode",
		hide: "explode",
		buttons: {
			" Login ": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );

				bValid = bValid && checkLength( name, "username", 1, 50 );
				bValid = bValid && checkLength( password, "password", 1, 50 );
				
				if ( bValid ) {
					postwith("index.php",{uname:name.val(),pass:password.val()});
					$( this ).dialog( "close" );
				}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});
	
	$( "#signup-form" ).dialog({
		autoOpen: false,
		height: 450,
		width: 675,
		modal: true,
		show: "explode",
		hide: "explode",
		buttons: {
			" Sign Up ": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );
				
				if(document.getElementById('male').checked){g = "Male"}else{g = "Female"};
				var month = document.getElementById('month').selectedIndex;
				var day = document.getElementById('day').selectedIndex;
				var y = document.getElementById('year');
				var year = y.options[y.selectedIndex].value;
				document.getElementById('image');
				bValid = bValid && checkLength( fname, "fname", 1, 50 );
				bValid = bValid && checkLength( lname, "lname", 1, 50 );
				bValid = bValid && checkLength( email, "email", 1, 50 );
				bValid = bValid && checkLength( uname, "uname", 1, 50 );
				bValid = bValid && checkLength( spass, "spass", 1, 50 );
				
				bValid = bValid && checkVal(month);
				bValid = bValid && checkVal(day);
				bValid = bValid && checkVal(year);
				if ( bValid ){
					document.suform.submit();
					$( this ).dialog( "close" );
				}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});

	
	$( "#login" )
		.button()
		.click(function() {
			$( "#login-form" ).dialog( "open" );
	});
	$( "#signup" )
		.button()
		.click(function() {
			$( "#signup-form" ).dialog( "open" );
	});
	
	
	function postwith (to,p) {
	  var myForm = document.createElement("form");
	  myForm.method="post" ;
	  myForm.action = to ;
	  for (var k in p) {
		var myInput = document.createElement("input") ;
		myInput.setAttribute("name", k) ;
		myInput.setAttribute("value", p[k]);
		myForm.appendChild(myInput) ;
	  }
	  document.body.appendChild(myForm) ;
	  myForm.submit() ;
	  document.body.removeChild(myForm) ;
	}
});
</script>

<!--login form----------------------------------------------------------------------------------------->
	<div id="login-form" title="Login">
		<p class="validateTips">All form fields are required.</p>

		<form>
		<fieldset>
			<label for="name">Username</label>
			<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
			<label for="password">Password</label>
			<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
		</fieldset>
		</form>
	</div>
<!------------------------------------------------------------------------------------------->
<!--signup form----------------------------------------------------------------------------------------->
	<div id="signup-form" title="Sign Up">
		<p class="validateTips">All form fields are required.</p>
		<form action = "signUpProcess.php" method = "post" enctype = "multipart/form-data" name = "suform">
		<fieldset>
			<table align="center" border = '0' >
				<tr>
					<td>Upload Profile Picture : </td>
					<td><input type="file" name="image" id="image"></td>
				</tr>
				<tr>
					<td>First Name : </td>
					<td><input type="text" name="fname" id="fname" placeholder = "First Name"></td>
				</tr>
				<tr>
					<td>Last Name : </td>
					<td><input type="text" name="lname" id="lname" placeholder = "Last Name"></td>
				</tr>
				<tr>
					<td>Email Address : </td>
					<td><input type="text" name="email" id="email" placeholder = "Email"></td>
				</tr>
				<tr>
					<td>Username : </td>
					<td><input type="text" name="uname" id="uname" placeholder = "Username"></td>
				</tr>
				<tr>
					<td>Password :</td>
					<td><input type="password" name="spass" id="spass" placeholder = "Password"></td>
				</tr>
				<tr>
					<td>Gender : </td>
					<td>
						<label><input type="radio" name="gender" id="male" value="Male" checked /> Male</label>
						<label><input type="radio" name="gender" id="female" value="Female" /> Female</label>
					</td>
				</tr>
				<tr>
					<td>Birthday: </td>
					<td>
						<select name="month"  id="month">
							<option value="0">--Month--</option>
							<?php
								$month = array(1=>"January","Febuary","March","April","May","June","July","August","September","October","November","December");
								foreach($month as $v => $m){
									echo "<option value='$v'>$m</option>";
								}
							?>
						</select>
							<select name="day"  id="day">
							<option value="0">--Day--</option>
							<?php
								for($d = 1; $d <= 31; $d++ ){
									echo "<option value='$d'>$d</option>";
								}
							?>
						</select>
							<select name="year" id="year">
							<option value="0">--Year--</option>
							<?php
								for($y = 2012; $y >=1940; $y-- ){
									echo "<option value='$y'>$y</option>";
								}
							?>
						</select>
					</td>
				</tr>
			</table>
		</form>
		</fieldset>
	</div>
<!------------------------------------------------------------------------------------------->
<div id="dialog" title="Error" style = "display:none;">
	<p>Username or Password Invalid!</p>
</div>
<!------------------------------------------------------------------------------------------->
<!------------------------------------------------------------------------------------------->
<div id="error" title="Error" style = "display:none;">
	<p>Invalid Input for Birthday!</p>
</div>
<!------------------------------------------------------------------------------------------->